import { useWaterIntake } from '@/contexts/WaterIntakeContext';
import { cn } from '@/lib/utils';
import { Empty } from './Empty';

// 格式化日期显示
const formatDate = (date: Date) => {
  return new Intl.DateTimeFormat('zh-CN', {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  }).format(date);
};

export const WaterRecordsList = () => {
  const { records } = useWaterIntake();
  
  // 如果没有记录，显示空状态
  if (records.length === 0) {
    return (
      <div className="mt-4 p-8 text-center">
        <Empty />
        <p className="text-gray-500 mt-2">暂无喝水记录</p>
      </div>
    );
  }

  return (
    <div className="mt-6">
      <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
        <i class="fa-solid fa-history mr-2 text-blue-500"></i>
        喝水记录
      </h3>
      
      <div className="space-y-3">
        {records.map((record) => (
          <div 
            key={record.id}
            className="bg-gray-50 rounded-xl p-4 flex justify-between items-center hover:bg-gray-100 transition-colors"
          >
            <div>
              <div className="flex items-center">
                <span className="font-medium text-gray-800">{record.type}</span>
                <span className="mx-2 text-gray-300">•</span>
                <span className="text-sm text-gray-500">{formatDate(record.timestamp)}</span>
              </div>
            </div>
            <div className="text-xl font-bold text-blue-600">{record.amount}ml</div>
          </div>
        ))}
      </div>
    </div>
  );
};